<template>
  <div>
    <open-modal
      :openModal="showTaskModal"
      @closeModal="handleClickCloseTask"
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-hh640">
        <div class="c-p c-ph24">
          <div class="c-w100 c-flex-row c-justify-sb c-aligni-center c-hh88 c-fc-xblack c-bd-b1">
            <div class="c-fs28">
              <span>任务数 {{`(${completeTaskCount}/${totalTaskCount})`}}</span>
              <span class="c-fs22 c-fc-gray c-ml20" v-if="completePeopleCount != 0">{{completePeopleCount}}人已完成</span>
            </div>
            <i
              class="iconfont c-fc-sgray c-fs30"
              @click="handleClickCloseTask"
            >&#xe84e;</i>
          </div>
        </div>
        <div
          class="c-w100 c-bg-white c-hh540 c-contexty-scroll c-scroll-touch"
          id="scrollContent"
          @scroll="onScrollEvent($event)"
        >
          <div class="c-w100 c-ph24">
            <div
              class="c-flex-row c-pv24 c-bd-b1"
              v-for="(item, index) in taskList"
              :key="index"
              :class="checkTime(item.expireAt) == '0' ? 'c-opacity50' : ''"
              @click.stop="goDetail(item.prodId, index)"
            >
              <div class="c-ww180 c-hh120 c-br12 c-p">
                <img
                  class="c-w100 c-h c-object-fit-cover c-br12"
                  :src="$addXossFilter(item.prodAvatar, require('@/assets/defult270.png'))"
                  alt=""
                >
                <div class="c-pa c-p-t4 c-p-l4 c-ph4 c-hh26 c-fs18 c-fc-white c-translucent-balck50 c-br4 c-flex-row c-flex-center">{{prodMapType[item.prodType]}}</div>
                <!-- <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh26 c-fs18 c-fc-white c-translucent-balck50 c-br-bl12 c-br-br12 c-flex-row c-flex-center c-ph8 c-ws-n">学习时长:{{item.learningTimes > 0 ? timeTmpToStrTimeFun(item.learningTimes) : `00:00:00`}}</div> -->
              </div>
              <div class="c-flex-grow1 c-w0 c-ml20 c-flex-column c-justify-sb c-p">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.prodName}}</div>
                <div
                  class="c-fs20"
                  :class="checkTime(item.expireAt) == '0' ? 'c-fc-xblack' : 'c-fc-red'"
                  v-if="((item.expireAt != null && checkTime(item.expireAt) != '-1'))"
                >{{checkTime(item.expireAt) == '0' ? '该课程已过期' : (checkTime(item.expireAt)+'后过期')}}</div>
                <div
                  class="c-pa c-p-tm8 c-p-r0 c-fs72 iconfont theme-fc"
                  v-if="item.progressRatio == 1"
                >&#xe856;</div>
                <template v-if="item.prodType != 51 && item.prodType != 115 && item.prodType != 180">
                  <div class="c-flex-row c-justify-sb c-aligni-center">
                    <div class="c-fc-gray c-fs22 c-ws-n">{{item.progressRatio == 0 ? '未开始' : '已学' + (item.progressRatio ? parseInt(item.progressRatio * 100) : 0) + '%'}}</div>
                    <div class="c-hh6 c-p c-text-hidden c-ml16 c-flex-grow1 c-w0">
                      <div class="c-bg-f2 c-br4 c-w100 c-h"></div>
                      <div
                        class="theme-bg c-h c-pa c-p-t0 c-p-l0 c-br4"
                        :style="{width: item.progressRatio * 100 + '%'}"
                      ></div>
                    </div>
                  </div>
                </template>
                <div
                  v-if="item.liveStatus == 0 && item.prodType == 51"
                  class="c-fs20 c-fc-gray"
                >直播时间：{{item.liveStartTime}}</div>
                <template v-if="item.prodType == 51 || item.prodType == 180">
                  <div
                    class="c-flex-row c-aligni-center"
                    :class="item.prodType == 51 ? 'c-justify-sb' : 'c-justify-end'"
                  >
                    <div
                      v-if="item.prodType == 51 && (item.liveStatus == 0 || item.liveStatus == 1 || item.liveStatus == 2)"
                      class="c-fs20 c-fc-gray"
                    >{{item.livePeople}}人{{item.liveStatus == 0 ? '已报名' : item.liveStatus == 1 ? '正在学习中' : '已学习'}}</div>
                    <div
                      class="c-p c-hh30"
                      :class="item.liveStatus == 0 ? 'c-ww70' : item.liveStatus == 1 ? 'c-ww88' : 'c-ww52'"
                      v-if="(item.prodType == 51 && item.liveStatus < 4) || (item.prodType == 180 && item.liveStatus == 1)"
                    >
                      <div
                        class="c-w100 c-h c-br4"
                        :class="item.liveStatus == 0 ? 'bg-lgray' : item.liveStatus == 1 ? 'bg-lblue' : 'bg-lorange'"
                      ></div>
                      <div
                        class="c-fs18 c-pa c-p-t0 p-l0 c-w100 c-h"
                        :class="item.liveStatus == 0 ? 'fc-gray' : item.liveStatus == 1 ? 'fc-blue' : 'fc-orange'"
                      >
                        <div class="c-flex-row c-flex-center c-w100 c-h">{{liveStatusMap[item.liveStatus]}}</div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <loading-status-tem
              :dataStatus="themeTaskDataStatus"
              noDataText="暂无数据"
              class="c-bg-white"
            ></loading-status-tem>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { goDetails } from "@/utils/goDetails.js"
import { utilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
const LIMIT = 10;
let pageIndex = 1;
export default {
  name: 'CircleThemeTaskModal',
  props: {
    showTaskModal: {
      type: Boolean,
      default: false
    },
    completeTaskCount: {
      type: Number,
      default: 0
    },
    totalTaskCount: {
      type: Number,
      default: 0
    },
    themeId: {
      type: String,
      default: ''
    }
  },
  components: {
    OpenModal,
    loadingStatusTem
  },
  watch: {
    showTaskModal(val) {
      if (val) {
        this.initData()
      }
    }
  },
  computed: {
    timeTmpToStrTimeFun() {
      return function (time) {
        let timeDate = utilJs.timeTmpToStrTime(time);
        return timeDate;
      }
    }
  },
  data() {
    return {
      themeTaskDataStatus: 'HAS_MORE_DATA',
      taskList: [],
      completePeopleCount: 0,
      prodMapType: global.prodMapType,
      type: 5,
      liveStatusMap: {
        0: '未开始',
        1: '正在直播',
        2: '回放',
        3: '结束'
      },
    }
  },
  methods: {
    initData() {
      pageIndex = 1;
      this.themeTaskDataStatus = 'HAS_MORE_DATA';
      this.taskList = [];
      this.getTaskList();
    },
    getTaskList() {
      if (this.themeTaskDataStatus == 'LOADING') {
        return;
      }
      this.themeTaskDataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getTaskList?themeId=${this.themeId}&page=${pageIndex}&limit=${LIMIT}`, res => {
        this.completePeopleCount = res.completePeopleCount;
        this.taskList = res.list || [];
        this.themeTaskDataStatus = res.list.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        // if (pageIndex == 1) {
        //   this.taskList = res.list.data || [];
        // } else {
        //   this.taskList = [...this.taskList, ...res.list.data];
        // }
        // if (res.list.data && (res.list.data.length < LIMIT)) {
        //   this.themeTaskDataStatus = pageIndex == 1 && res.list.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA'
        // } else {
        //   this.themeTaskDataStatus = 'HAS_MORE_DATA'
        //   pageIndex++;
        // }
      })
    },
    onScrollEvent(e) {
      let element = document.getElementById('scrollContent');
      utilJs.elementLoading(element, () => {
        if (this.themeTaskDataStatus == 'HAS_MORE_DATA' && this.taskList.length > 0) {
          this.getTaskList();
        }
      })
    },
    //判断课程是否到了有效期的时间
    checkTime(expireAt) {
      if (expireAt == null) {
        return -1;
      }
      let nowTime = (new Date()).getTime();
      let expireTime = utilJs.getTimeByDate(expireAt);
      let eightTime = 691200000; //8天时间的毫秒数
      if (expireTime > nowTime && expireTime - nowTime > eightTime) {
        return "-1"; //代表没过期
      } else {
        if (expireTime <= nowTime) {
          return "0"; //已过期
        } else {
          let time = expireTime - nowTime;
          let timeObj = utilJs.timeTmpToStr(time, true);
          if (timeObj.dayNum != -1) {
            return timeObj.dayNum + '天';
          } else if (timeObj.hourNum != -1) {
            return timeObj.hourNum + '时' + timeObj.minuteNum + '分';
          } else if (timeObj.minuteNum != -1) {
            return timeObj.minuteNum + '分' + timeObj.secondsNum + '秒';
          } else if (timeObj.secondsNum != -1) {
            return timeObj.secondsNum + '秒';
          } else {
            return '';
          }
        }
      }
    },
    goDetail(id, index) {
      let prodType = Number(this.taskList[index].prodType);
      let courseType = prodType == 111 ? 1 : prodType == 112 ? 2 : 0;
      prodType = this.type == 54 ? global.ckFrom.column : prodType == 110 || prodType == 111 || prodType == 112 ? global.ckFrom.course : prodType;
      let query = {
        themeId: this.themeId
      }
      if (this.type == 54) {
        query.distribution = '1';
      }
      goDetails(this, prodType, id, query, courseType);
    },
    handleClickCloseTask() {
      this.$emit('handleClickCloseTask')
    }
  }
}
</script>

<style lang="less" scoped>
</style>